import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Spin, Form, Row, Col, Input, Button, Dropdown, Menu, Icon, message, Modal, Checkbox, Upload, Alert, Progress } from 'antd'
import _ from 'lodash'
import Ajax from 'lib/Ajax'
import { backUrl } from 'lib/fun'

const Dragger = Upload.Dragger;

// 新建编辑
class Edit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      percent: 0,
      over: false,
      type: "",
      title: "",
      success: 0,
      fail: 0,
      msg: ""
    }
  }

  componentWillReceiveProps(nextProps){
    if(!nextProps.visible){
      this.setState({
        percent: 0,
        over: false,
        type: "",
        title: "",
        success: 0,
        fail: 0,
        msg: ""
      });
    }else if(nextProps.barId&&(this.props.barId != nextProps.barId)){
      this.loadBarMsg(nextProps.barId, nextProps.typeId);
    }
  }

  loadBarMsg = (b,t)=>{
    var self = this
    if(b||this.props.visible){
      Ajax({
        url: '/upload/getBarInfo',
        data: {
          barId: b?b:this.props.barId,
          typeId: t?t:this.props.typeId
        },
        success: function(data){
          self.setState({
            percent: data.percent,
            over: data.over
          });
          if(!data.over){
            setTimeout(()=>{
              self.loadBarMsg()
            }, 500)
          }else{
            self.setState({
              type: "success",
              title: "上传成功",
              success: data.success||0,
              fail: data.fail||0,
              msg: data.msg
            })
          }
        },
        error: function(error){
          setTimeout(()=>{
            self.loadBarMsg()
          }, 500)
        }
      });
    }
  }

  onCancel = ()=>{
    this.props.onClose(this.state.percent >=  100);
  }

  renderDesc = ()=>{
    const { type, title, success, fail, msg } = this.state;
    const { successTitle, failTitle } = this.props;
    return <div>
      <p>{successTitle?successTitle:'上传成功'}{success||0}人，{
        fail&&fail>0?<span style={{color:'#f50'}}>{failTitle?failTitle:'上传失败'}{fail}人</span>:<span>{failTitle?failTitle:'上传失败'}0人</span>
      }</p>
      <p>{msg}</p>
    </div>
  }

  renderMsg = ()=>{
    const { type, title, desc, msg } = this.state;
    const { successTitle, failTitle } = this.props;
    if(type){
      return (<Alert
                message={ successTitle?successTitle:title }
                description={ this.renderDesc() }
                type={ type }
                showIcon
              />)
    }else{
      return ""
    }
  }

  render() {
    var self = this;
    const { visible, title } = this.props;
    
    return (<Modal 
              title={title?title:"进度查看"}
              visible={visible}
              onOk={ this.onCancel } 
              onCancel={ this.onCancel }
              okText="确定" 
              cancelText="取消"
              maskClosable={false}
            >
              <div style={{ marginTop:15, textAlign: 'center', marginBottom: 15 }}>
                <Progress type="circle" percent={this.state.percent} />
              </div>
              {
                this.state.over?this.renderMsg():""
              }
            </Modal>);
  }
}

function mapStateToProps(state) {
  return {
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({  }, dispatch)
}

module.exports = connect(mapStateToProps,mapDispatchToProps)((Edit))